<?php
    $this->layout('base.phtml', [
        'title' => _('Collection group'),
        'canonical' => url_full('edit group collection', ['id' => $collection->id]),
        'has_errors' => $error || $errors,
        'modal_enabled' => true,
    ]);
?>

<div class="section section--small">
    <div class="section__title">
        <h1 id="modal-title"><?= _('Collection group') ?></h1>
    </div>

    <div class="section__intro">
        <p>
            <?= protect($collection->name) ?>
        </p>

        <p>
            <?= _('Groups help you to organize your collections. They are only visible to you on the main collections page.') ?>
        </p>
    </div>

    <form method="post" action="<?= url('update group collection', ['id' => $collection->id]) ?>">
        <?= $this->include('alerts/_error.phtml', ['message' => $error]) ?>

        <input type="hidden" name="csrf" value="<?= csrf_token() ?>" />
        <input type="hidden" name="from" value="<?= $from ?>" />

        <div
            class="form-group group-selector <?= isset($errors['name']) ? 'form-group--invalid' : '' ?>"
            data-controller="group-selector"
        >
            <div class="group-selector__group-input" data-group-selector-target="groupInput">
                <label for="name">
                    <?= _('How to name the group?') ?>
                    <span class="label__help">
                        <?= _f('(max. %d characters)', $name_max_length) ?>
                    </span>
                </label>

                <input
                    id="name"
                    name=""
                    type="text"
                    value="<?= $name ?>"
                    list="group-names"
                    autocomplete="off"
                    autofocus
                    maxlength="<?= $name_max_length ?>"
                    data-group-selector-target="input"
                    aria-describedby="name-desc"
                />

                <datalist id="group-names">
                    <?php foreach ($groups as $group): ?>
                        <option value="<?= protect($group->name) ?>">
                    <?php endforeach; ?>
                </datalist>
            </div>

            <div class="group-selector__group-select" data-group-selector-target="groupSelect">
                <label for="name">
                    <?= _('Select a group') ?>
                </label>

                <div class="form-group__stack">
                    <select
                        id="name"
                        name="name"
                        data-group-selector-target="select"
                        aria-describedby="name-desc"
                     >
                        <option <?= $name === '' ? 'selected' : '' ?> value="">
                            <?= _('No groups') ?>
                        </option>

                        <?php foreach ($groups as $group): ?>
                            <option <?= $this->safe('name') === $group->name ? 'selected' : '' ?> value="<?= $group->name ?>">
                                <?= protect($group->name) ?>
                            </option>
                        <?php endforeach; ?>
                    </select>

                    <button type="button" data-action="group-selector#showInput">
                        <?= icon('plus') ?>
                        <?= _('New') ?>
                    </button>
                </div>
            </div>

            <div id="name-desc">
                <?php if (isset($errors['name'])): ?>
                    <p class="form-group__error">
                        <span class="sr-only"><?= _('Error') ?></span>
                        <?= $errors['name'] ?>
                    </p>
                <?php endif; ?>
            </div>
        </div>

        <div class="form__actions">
            <button type="submit" class="button--primary">
                <?= _('Save changes') ?>
            </button>
        </div>
    </form>
</div>
